<template>
	<navbar title="培训详情" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="display: flex;justify-content: center;margin-top: 20rpx;" v-if="Info.time">
			<u-count-down :timestamp="Info.time" style="color: #F00505;" autoStart @change="onChange">
				<view class="time" style="display: flex;">

					<text class="time__item">{{ timeData.minutes }}分</text>
					<text class="time__item">{{ timeData.seconds }}秒</text>
				</view>
			</u-count-down>
		</view>
		<view class="" style="margin-top: 30rpx;background-color: white;border-radius: 10rpx;padding: 30rpx;">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="" style="font-weight: bold;">
					培训信息
				</view>
				<view class="" style="color: #F00505;" v-if="Info.state == 1">
					待支付
				</view>
				<view class="" style="color: #707070;" v-if="Info.state == 2">
					已完成
				</view>
				<view class="" style="color: #707070;" v-if="Info.state == 3">
					已退款
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;height: 152rpx;display: flex;align-items: center;">
				<view class="" style="width: 256rpx;height: 152rpx;border-radius: 10rpx;">
					<image :src="Info.cover" style="width: 256rpx;height: 152rpx;border-radius: 10rpx;"
						mode="aspectFill"></image>
				</view>
				<view class=""
					style="margin-left: 30rpx;height: 152rpx;display: flex;flex-direction: column;justify-content: space-between;">
					<view class=""
						style="display: flex;align-items: center;justify-content: space-between;width: 350rpx;">
						<view class="" style="font-size: 36rpx;font-weight: bold;">
							<span v-if="type == 1">七天速成</span>
							<span v-if="type == 2">城市巡回</span>
						</view>

					</view>
					<view class="" style="display: flex;align-items: center;">
						<image src="/static/image/time.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
						<view class="" style="margin-left: 10rpx;color: #717171;">
							<span v-if="type == 1">{{Info.stage_name}}</span>
							<span v-if="type == 2" style="font-size: 26rpx;">{{Info.start_time}}-{{Info.end_time}}</span>
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;margin-left: -4rpx;" @click="place">
						<image src="/static/address/place1.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
						<view class="" style="margin-left: 6rpx;color: #717171;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 310rpx;">
							{{Info.province}}{{Info.city}}{{Info.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;display: flex;align-items: center;justify-content:space-between;">
				<view class="" style="color: #5062A7;" @click="bmProfile">
					报名信息>
				</view>
				<view class="" style="font-size: 32rpx;">
					<span style="font-size: 20rpx;">¥</span>{{Info.pay_price}}
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;background-color: white;border-radius: 10rpx;padding: 30rpx;">
			<view class="" style="font-weight: bold;">
				订单信息
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;justify-content: space-between;">
				<view class="">
					订单编号
				</view>
				<view class="">
					{{Info.order_no}}
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;justify-content: space-between;">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{Info.create_time}}
				</view>
			</view>
		</view>
	</view>
	<view class="" v-if="Info.state == 1 && Info.time">
		<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
			<view class="" style="display: flex;height: 100rpx;width: 100%;">
				<view class=""
					style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: white;font-size: 32rpx;">
					总计：<span style="font-weight: bold;color: #F00505;">¥{{Info.pay_price}}</span>
				</view>
				<view class="" @click="cancel"
					style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: #D8D8D8;font-size: 32rpx;">
					取消订单
				</view>
				<view class="" @click="pay"
					style="flex: 1;display: flex;justify-content: center;align-items: center;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);font-size: 32rpx;color: white;">
					立即支付
				</view>
			</view>
		</view>

	</view>
	<view class="">
		<u-popup v-model="popShow" :border-radius="50" mode="bottom" @close="popShow=false" style="position: relative;">
			<image class="chahaoC" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/colse_chooseshop.png"
				mode="aspectFit" @click="popShow=false"></image>
			<view class="" style="height: 1000rpx;">
				<u-form :model="Info" label-width="220" :label-style="{'font-size':'32rpx','padding':'0 20rpx'}">
					<u-form-item :label="item.name" prop="name" required v-for="(item,index) in InfoArr">
						<view class="" v-if="item.type != 7 && item.type != 3">
							{{item.value}}
						</view>
						<view class="" v-if="item.type == 3">
							<span v-for="it in JSON.parse(JSON.stringify(item.value))" style="margin-left: 10rpx;">	{{it}}</span>
						
						</view>
						<view class="" v-if="item.type == 7">

							<image v-if="item.value" :src="item.value" style="width: 140rpx;height: 140rpx;"
								mode="aspectFill"></image>

						</view>
					</u-form-item>
				</u-form>
			</view>

		</u-popup>
	</view>
	<u-modal v-model="modalShow" @confirm="modelConfirm" content="请确认是否要取消该订单？" title="取消订单" show-cancel-button
		:confirm-style="{'color':'white','background':'#5062A7'}"></u-modal>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { speedOrderDetail, speedFormInfo,speedOrderCancel } from '@/service/api/speed'
	import {cityOrderDetail,cityFormInfo,cityOrderCancel} from '@/service/api/city'
	import tools from '@/utils/tools'
	const modalShow = ref(false);
	const id = ref('')
	const popShow = ref(false)
	const Info = reactive({
		address: "",
		city: '',
		cover: "",
		create_time: "",
		id: "",
		latitude: "",
		longitude: "",
		order_no: "",
		pay_price: "",
		pay_time: "",
		province: "",
		speed_id: "",
		stage_name: "",
		state: "",
		time: "",
		user_id: "",
		start_time:"",
		end_time:""
	})
	const arr = ref([])
	const form = reactive({})
	const InfoArr = ref([]) as any
	const timeData = ref({
		minutes: "",
		seconds: ""
	})
	const type = ref(1) //1是七天速成2是城市巡回
	onLoad((options) => {
		id.value = options.id;
		if(options.type){
			type.value = options.type;
		}
		getData()
	})
	//报名信息
	const bmProfile = async () => {
		tools.navTo('/pagesB/mine/mineTrain/fillProfile?id=' + id.value + '&type=' + type.value)
		// if(type.value == 1){
		// 	getSpeedProfile()
		// }
		// if(type.value == 2){
		// 	getCityProfile()
		// }

	}
	//立即支付
	const pay = ()=>{
		tools.navTo('/pagesB/order/pay?id=' + id.value + '&type=' + type.value);
	}
	const getSpeedProfile = async()=>{
		const res = await speedFormInfo({ id: id.value });
		InfoArr.value = res.msg;
		if (res.code == 1) {
			popShow.value = true;
		} else {
			tools.showToast(res.msg);
		}
		InfoArr.value.forEach((item : any) => {
			//多选
			if (item.type == 3) {
				arr.value = JSON.parse(JSON.stringify(item.value))
				//console.log(JSON.parse(JSON.stringify(item.value)));
			}
		})
	}
	const getCityProfile = async()=>{
		const res = await cityFormInfo({ id: id.value });
		InfoArr.value = res.msg;
		if (res.code == 1) {
			popShow.value = true;
		} else {
			tools.showToast(res.msg);
		}
		InfoArr.value.forEach((item : any) => {
			//多选
			if (item.type == 3) {
				arr.value = JSON.parse(JSON.stringify(item.value))
				//console.log(JSON.parse(JSON.stringify(item.value)));
			}
		})
	}
	const onChange = (e) => {
		timeData.value = e;
		if (timeData.value.minutes == '0' && timeData.value.seconds == '0') {
			modelConfirm()
		}
		console.log(e);
	}
	const getData = async () => {
		if(type.value == 1){
			getSpeedData()
		}
		if(type.value == 2){
			getCityData()
		}
	 
	}
	const getSpeedData = async()=>{
		const res = await speedOrderDetail({ id: id.value })
		for (let i in Info) {
			Info[i] = res.msg[i]
		}
		console.log(res.msg);
	}
	const getCityData = async()=>{
		const res = await cityOrderDetail({ id: id.value })
		for (let i in Info) {
			Info[i] = res.msg[i]
		}
	}
	//取消订单
	const cancel = () => {
		modalShow.value = true;
	}
	//确定取消
	const modelConfirm = () => {
		modalShow.value = false;
		if(type.value == 1){
			speedCancle()
		}
		if(type.value == 2){
			cityCancle()
		}
	}
	//七天巡回取消报名
	const speedCancle = async()=>{
		const res = await speedOrderCancel({id:id.value});
		if(res.code == 1){
			tools.showToast(res.msg);
			setTimeout(()=>{
				tools.navTo('',2)
			},1000)
		}
	}
	//城市巡回取消报名
	const cityCancle = async()=>{
		const res = await cityOrderCancel({id:id.value});
		if(res.code == 1){
			tools.showToast(res.msg);
			setTimeout(()=>{
				tools.navTo('',2)
			},1000)
		}
	}
	//打开地图
	const place = () => {
	 
	 
		let param = {
			scale:1,
			longitude:Number(Info.longitude),
			latitude:Number(Info.latitude)
		}
		//  tools.openLocation(param);
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		padding: 0 30rpx 130rpx 30rpx;
		background-color: #F8F8F9;
		overflow: hidden;
	}

	:deep(.u-model__title) {
		font-size: 36rpx !important;
		font-weight: bold !important;
	}

	.chahaoC {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		top: 30rpx;
		right: 30rpx;
	}
</style>